<template>
  <el-card>
    <!-- <el-form :model="form" label-position="left"> -->
    <!-- <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                <el-form-item label="报表类型">
                    <span>{{ form.configTypeName }}</span>
                </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                <el-form-item label="名称">
                    <el-input v-model="form.name" />
                </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                <el-form-item label="模块Id">
                    <el-input v-model="form.appKey" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-form-item label="文件名">
                <span>{{ form.fileName }}</span>
            </el-form-item>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-form-item label="备注">
                    <el-input v-model="form.remark" type="textarea" />
                </el-form-item>
            </el-col>
        </el-row> -->
    <!-- </el-form> -->
    <template #header>
      排版设置<el-tag style="margin-left: 5px" type="warning" closable
        >span值为4到24之间</el-tag
      >
      <div style="float: right">
        <el-button :icon="Plus" @click="save" type="primary" plain
          >提 交</el-button
        >
      </div>
    </template>
    <div class="dragList">
      <draggable v-model="dataList" animation="200" item-key="id">
        <template #item="{ element }">
          <div class="item" :style="{ width: handleItemWidth(element.span) }">
            {{ element.label }} span:<el-input
              size="small"
              style="width: 45px; height: 80%; margin-top: 6px"
              v-model="element.span"
              type="number"
              min="0"
              max="24"
            >
            </el-input>
          </div>
        </template>
      </draggable>
    </div>
  </el-card>
  <el-card style="margin-top: 10px">
    <template #header>
      <div style="display: flex; justify-content: end">
        <el-button @click="saveQuery" type="primary">新 增</el-button>
        <el-button @click="deleteRow" :icon="Delete" type="danger" plain
          >删 除</el-button
        >
      </div>
    </template>
    <el-table
      :data="dataList"
      border
      disabled
      @row-click="rowClick"
      @select="selectRow"
      @select-all="selectAll"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="label" label="名称"></el-table-column>
      <el-table-column prop="vmodel" label="过滤控件属性名"></el-table-column>
      <el-table-column
        prop="componentName"
        label="控件类型名称"
      ></el-table-column>
      <el-table-column prop="defaultValue" label="默认值"></el-table-column>
      <el-table-column prop="span" label="控件占的列数"></el-table-column>
      <el-table-column prop="required" label="是否必填"></el-table-column>
      <el-table-column fixed="right" label="操作" width="60">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="edit(scope)"
            >修 改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script setup>
import { ref, defineModel, onMounted } from "vue";
import { Delete, Plus } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox ,ElNotification} from "element-plus";
import draggable from "vuedraggable";
import API from "@/api/model/report.js";
const emit = defineEmits(["update", "toDetail", "toAdd", "delete"]);
const dataList = defineModel("componentList");
const deleteList = ref([]);
const selectData = ref({});
const props = defineProps({
  fileName: { type: String, default: "" },
});
const handleItemWidth = (val) => {
  return (val / 24) * 100 - 2 + "%";
};
const save = async () => {
  let res = await API.updateOrder.post({
    bean: { fileName: props.fileName },
    dataList: dataList.value,
  });
  if (res.code == 200) {
    ElMessage({
      message: "修改成功",
      type: "success",
    });
    emit("update");
    emit("delete");
  }
};
const rowClick = (val) => {
  console.log(val);
  selectData.value = val;
};
const selectRow = (rows, row) => {
  deleteList.value = rows;
};
const selectAll = (rows) => {
  deleteList.value = rows;
};
const deleteRow = async () => {
  console.log(deleteList.value)
  if (deleteList.value.length > 0) {
    let param = {
      fileName: props.fileName,
      dataList: deleteList.value.map((ele) => {
        return ele.vmodel;
      }),
    };
    ElMessageBox.confirm("确定删除吗？", "提示", {
      type: "warning",
      confirmButtonText: "确定",
      confirmButtonClass: "el-button--danger",
    })
      .then(async() => {
        let res =await API.delete.post(param);
        if (res.code == 200) {
          ElNotification.success({ message: "删除成功", duration: 2000 });
          emit("update");
          emit("delete");
        }
      })
      .catch(() => {});
  } else {
    ElMessage({
      message: "请选择表格记录",
      type: "warning",
    });
  }
};
const edit = (scope) => {
  emit("toDetail", scope.row);
};
const saveQuery = () => {
  emit("toAdd");
};
</script>
<style lang="less" scoped>
.dragList {
  overflow: auto;
}

.item {
  display: flex;
  justify-content: center;
  cursor: move;
  float: left;
  background: #fff;
  // width: v-bind(itemWidth);
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin: 0 15px 15px 0;
  border: 1px solid #e6e6e6;
}

.dragList .sortable-ghost {
  opacity: 0.5;
}

:deep(.el-input__wrapper) {
  box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color))
    inset;
  cursor: default;
  background-color: transparent; //背景颜色透明
  border-bottom: 0px solid #999;
  border-radius: 0;

  .el-input__inner {
    cursor: default !important;
  }
}
</style>
